<template>
  <ul class="list">
    <li v-for="task in list" :key="task.id">
      <input type="checkbox" v-model="task.checked" />
      <p>{{ task.task }}</p>
      <a href="#" @click="deleteTask(task)"></a>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 当原数据在父组件中时，子组件需要通过自定义事件通知父组件修改
    // 不允许在子组件内直接修改父组件中的值
    deleteTask(task) {
      // 删除 todoList 里面的对象？
      this.$emit('delete', task);
    },
  },
};
</script>

<style lang="scss" scoped>
.list li {
  height: 32px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-left: 5px solid #629a9c;
  border-radius: 3px;
  margin-bottom: 10px;
}

.list input {
  width: 22px;
  height: 22px;
  margin-left: 20px;
  margin-right: 15px;
  cursor: pointer;
}

.list p {
  flex: 1;
}

.list a {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 6px double #fff;
  margin-right: 10px;
  background: #ccc;
  line-height: 14px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

a:hover {
  background-color: red;
}
</style>
